<template>
  <div>
    <el-dialog :title="title" v-model="store.state.editDialogVisible" width="400px" center>
      <el-form :model="editForm" label-width="80px">
        <el-form-item prop="mname" label="电影名" size="mini">
          <el-input v-model="editForm.mname" placeholder="电影名"></el-input>
        </el-form-item>
        <el-form-item prop="nickname" label="英文名" size="mini">
          <el-input v-model="editForm.nickname" placeholder="电影英文名"></el-input>
        </el-form-item>
        <el-form-item prop="mtype" label="电影类型" size="mini">
          <el-select v-model="type" multiple placeholder="请选择电影类型" style="width: 270px">
            <el-option  v-for="item in typeData" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="duration" label="时长" size="mini">
          <el-input v-model="editForm.duration" placeholder="时长"></el-input>
        </el-form-item>
        <el-form-item prop="director" label="导演" size="mini">
          <el-input v-model="editForm.director" placeholder="导演"></el-input>
        </el-form-item>
        <el-form-item prop="mrole" label="主演" size="mini">
          <el-input v-model="editForm.mrole" placeholder="主演"></el-input>
        </el-form-item>
        <el-form-item prop="mlanguage" label="语言" size="mini">
          <el-radio-group v-model="radio">
            <el-radio label="国语">国语</el-radio>
            <el-radio label="外语">外语</el-radio>
            <el-radio label="国语/粤语">国语/粤语</el-radio>
            <el-radio label="国语/台湾">国语/台湾</el-radio>
            <el-radio label="国语/香港">国语/香港</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="mstate" label="状态" size="mini">
          <el-radio-group v-model="state">
            <el-radio label="正在热映">正在热映</el-radio>
            <el-radio label="即将上映">即将上映</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="desn" label="简介" size="mini">
          <el-input v-model="editForm.desn" placeholder="简介" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span>
        <el-button size="mini" @click="quitDialog('setEditDialogVisible')">取消</el-button>
        <el-button size="mini" @click="InsertOrEdit()">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="删除电影" v-model="store.state.delDialogVisible" width="300px" center>
      <div align="center">删除不可恢复，是否确定删除？</div>
        <el-button size="mini" @click="quitDialog('setDelDialogVisible')">取消</el-button>
        <el-button size="mini" @click="deleteMovie">确定</el-button>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, defineProps, defineEmits, onUpdated } from 'vue'
import { useStore } from 'vuex'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { typeData } from '@/assets/data/typeData.js'
onUpdated(() => {
  setEditMsg()
})
const store = useStore()
const props = defineProps({
  multipleSelection: [],
  editRow: ref(''),
  insertOrEdit: ref('')
})
const emit = defineEmits(['getMoviesData'])
function quitDialog(val) {
  store.commit(val, false)
}
const radio = ref('')
const state = ref('')
const title = ref('编辑电影')
const idx = ref('')
function deleteRow() {
  axios
    .get('/api/movie/deleteMovie' + '/' + idx.value)
    .then(() => {
      ElMessage.success('删除电影信息成功！')
      emit('getMoviesData')
    })
    .catch(() => {
      ElMessage.warning('已有订单，无法删除电影信息！')
    })
}
function deleteMovie() {
  for (const item of props.multipleSelection) {
    idx.value = item.mid
    deleteRow()
  }
  store.commit('setDelDialogVisible', false)
}
const type = ref([])
const editForm = reactive({
  mid: null,
  mrole: '',
  director: '',
  desn: '',
  pic: '',
  mtype: '',
  rate: '',
  duration: '',
  mlanguage: '',
  mname: '',
  mstate: '',
  nickname: '',
  mcount: ''
})
function setEditMsg() {
  if (props.insertOrEdit === 1) {
    editForm.mname = ''
    editForm.mtype = ''
    editForm.duration = ''
    editForm.director = ''
    editForm.mrole = ''
    editForm.mlanguage = ''
    editForm.mstate = ''
    editForm.desn = ''
    editForm.nickname = ''
    radio.value = ''
    state.value = ''
    type.value = ''
    title.value = '添加电影'
  } else {
    editForm.mname = props.editRow.mname
    editForm.duration = props.editRow.duration
    editForm.director = props.editRow.director
    editForm.mrole = props.editRow.mrole
    editForm.nickname = props.editRow.nickname
    radio.value = props.editRow.mlanguage
    state.value = props.editRow.mstate
    editForm.mlanguage = props.editRow.mlanguage
    editForm.mstate = props.editRow.mstate
    editForm.desn = props.editRow.desn
    editForm.rate = props.editRow.rate
    editForm.mcount = props.editRow.mcount
    editForm.pic = props.editRow.pic
    editForm.mtype = props.editRow.mtype
    title.value = '编辑电影'
  }
}
function InsertOrEdit() {
  if (props.insertOrEdit === 1) {
    editForm.mid = null
    editForm.duration = parseInt(editForm.duration)
    editForm.pic = editForm.mname + '.jpg'
    editForm.mstate = state.value
    editForm.mlanguage = radio.value
    let a = 0
    editForm.mtype = type.value[0]
    for (const item in type.value) {
      if (a === 0) {
        a = 1
        continue
      }
      editForm.mtype = editForm.mtype + '/' + type.value[item]
    }
    editForm.rate = 0
    editForm.mcount = '0'
    axios
      .post('/api/movie/addMovie', editForm)
      .then(() => {
        emit('getMoviesData')
        ElMessage.success('增加电影成功！')
      })
      .catch(() => {
        ElMessage.warning('增加电影失败！')
      })
  } else {
    editForm.mid = props.editRow.mid
    editForm.mstate = state.value
    editForm.mlanguage = radio.value
    if (type.value.length !== 0) {
      let a = 0
      editForm.mtype = type.value[0]
      for (const item in type.value) {
        if (a === 0) {
          a = 1
          continue
        }
        editForm.mtype = editForm.mtype + '/' + type.value[item]
      }
    }
    axios
      .post('/api/movie/updateMovie', editForm)
      .then(() => {
        emit('getMoviesData')
        ElMessage.success('修改电影信息成功！')
      })
      .catch(() => {
        ElMessage.warning('修改电影信息失败！')
      })
  }
  store.commit('setEditDialogVisible', false)
}
</script>
